<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Title</title>
    <style>
        .account {
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="account">
    <h1 style="text-align: center;">注册</h1>
    <form action="" method="post">
        {% csrf_token %}
        {% for field in form %}
            {% if field.name == 'code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0;">{{ field }}</div>
                        <div class="col-md-6"><input id='Get_code' type="button" class="btn btn-default"
                                                     value="点击获取验证码"></div>
                    </div>

                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                </div>
            {% endif %}
        {% endfor %}
        <button type="submit" class="btn btn-primary" id="register">注 册</button>
    </form>

</div>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(function () {
        {## 点击获取验证码#}
        var countdown = 60;
        {#获取验证码#}
        $('#Get_code').click(function () {
            _this = this;
            _this.disabled = true;
            var timer = setInterval(function task() {
                $(_this).val(countdown + "后重新发送");
                if (countdown == 60) {
                    var phone = $('#phone').val();
                    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!myreg.test(phone)) {
                        $("#phone_msg").html("请输入正确的手机号格式");
                        {#console.log(countdown + "  1111");#}
                        return false;
                    } else {
                        $.ajax({
                            url: 'http://127.0.0.1:8000/send/sms?tpl=register',
                            type: 'get',
                            data: {
                                'phone': phone,
                            },
                            success: function (res) {
                                if (res.search('频率限制') != -1) {
                                    alert('发送过于频繁,' + res + ',请更换手机号');
                                    clearInterval(timer);
                                    $(_this).val('获取验证码');
                                    _this.disabled = false;
                                }
                                {#console.log(res);#}
                                return true;
                            },
                            error: function (res) {
                                console.log(res)
                            }
                        })

                    }
                }
                countdown = countdown - 1;
                {#console.log(countdown);#}
                if (countdown == 0) {
                    clearInterval(timer);
                    $(_this).val('获取验证码');
                    _this.disabled = false;
                }
            }, 1000);
        });
        {# 点击注册   #}
        $('#register').click(function () {
            return true
        })


    })


</script>
</body>
</html>